<template>
	<el-container>
		<el-header>
			<HomeHeader></HomeHeader>
		</el-header>
		<el-container class="main-wrapper">
			<el-main class="transform-main " style="overflow: hidden;">
				<div style="margin-bottom: 2px;display: flex;background-color: #000;justify-content: space-between;">


					<div class="tab-bg" style="display: flex;justify-content: space-between; height: 40px;">
						<div style="display: flex;justify-content: space-between;">
							<!-- 登录后行情 -->
							<div class style="cursor: pointer; display: flex;">
								<div class="market transaction-red-bg hangqing">
									<span class="iconfont icon-hangqing transaction-hangqing"></span>
									<span style="font-size: 14px;">行情</span>
								</div>
								<div class="optional optional-item-hover" v-if="$store.state.haslogin" :class="currIndex == 'second'?'currIndex':''" @click="optTablebox('','','1','zi')">自选</div>
								<div class="optional-list">
									<div class="top">
										<div class="optional-item-hover" @click="optTablebox(item,index,'1')" :class="currIndex == index?'currIndex':''" v-for="(item, index) in marketNot"
										 :key="index" v-if="index < 4">{{item.name}}</div>
									</div>
									<div class="bottom">
										<div class="optional-item-hover" @click="optTablebox(item,index,'1')" :class="currIndex == index?'currIndex':''" v-for="(item, index) in marketNot"
										 :key="index" v-if="index >= 4">{{item.name}}</div>
									</div>
								</div>
							</div>
							<!-- 登录后行情 -->

							<div class style="margin-left: 15px;display: flex;">
								<div class="market transaction-red-bg zixun">
									<span class="iconfont icon-zixun transaction-information"></span>
									<span style="font-size: 14px;margin-left: 5px; ">资讯</span>
								</div>
								<div class="optional-list">
									<div class="top">
										<div class="optional-item-hover" v-for="(item, index) in information" :key="index" v-if="index < 4" @click="optionalTablebox(item,index,'2')"
										 :class="optionalIndex == index?'currIndex':''">{{item.name}}</div>
									</div>
									<div class="bottom">
										<div class="optional-item-hover" v-for="(item, index) in information" @click="optionalTablebox(item,index,'2')" :class="optionalIndex == index?'currIndex':''"
										 :key="index" v-if="index >= 4">{{item.name}}</div>
									</div>
								</div>
							</div>
							<div class style="margin-left: 15px;display: flex;">
								<div class="market transaction-red-bg zhibo">
									<span class="iconfont icon-zhibo-"></span>
									<span style="font-size: 14px;margin-left: 5px; ">直播</span>
								</div>
								<div class="optional-list">
									<div style="display: flex;  line-height: 40px; text-align: center;">
										<div @click="qidai" class="optional-item-hover" style="cursor: pointer; width: 70px;border-right: 0.5px solid rgb(78, 78, 78);" v-for="(item, index) in direct" :key="index"
										 v-if="index < 4">{{item.name}}</div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>


				<el-row  :gutter="3">
					<el-col class="hei"  :span="4" v-if="cutIndex == 2">
						<div :style="'height:'+windowHeight+'px'"  class="listhi-cont" style="margin-bottom: 2px; width: 100%;height: 800px;  padding: 20px 0 0 0;overflow: hidden auto;">
							<div style="display:flex;align-items: center; justify-content: center;">
								<span class="buy-xian">——</span>
								<span style="margin: 0 10px;">财经要闻</span>
								<span class="buy-xian">——</span>
							</div>

							<div style="width:100%;display: flex;justify-content: center;margin-top: 20px;position: relative;">
								<input type="text" v-model="searchTran" placeholder="请输入搜索内容" class="shous" />
								<span class="iconfont icon-search search-tran" @click="getSearch"></span>
							</div>
							<div style="width:100%;margin-left:10px;display: flex;margin-top: 20px;position: relative;">
								<div style="cursor: pointer;" @click="sort('date')">
									<span class="iconfont icon-shijian date-icon"></span>
									<span>按时间</span>
									<span class="iconfont icon-shangxiajiantou shangxiajiantou"></span>
								</div>
								<div style="margin-left:30px;cursor: pointer;" @click="sort('redu')">
									<span class="iconfont icon-redu redu"></span>
									<span>按热度</span>
									<span class="iconfont icon-shangxiajiantou shangxiajiantou"></span>
								</div>
							</div>
							<div style="display: flex;justify-content: center;margin-top: 20px;" v-if="newsList.length <= 0">暂无数据</div>

							<div class="newsList-item" style="margin:0 10px 10px 10px; padding-bottom: 10px;cursor: pointer;" v-for="(item,index) in newsList"
							 :key="index" @click="selectDetails(item,index)">
								<div style="display: flex;margin-top: 20px;">
									<div style="font-size: 12px;position: relative;">
										<span class="iconfont icon-triangle-left sanjiao" :class="index < 3?'red':'ccc'"></span>
										<span class="quantity" :class="index < 3?'':'bg-cc'">{{index+1}}</span>
									</div>
									<div style="font-weight: bolder;font-size: 12px;" class="history-title">{{item.title}}</div>
								</div>
								<div style="display: flex; justify-content: space-between;margin-top: 12px;margin-left:28px;">
									<div>
										<span style="font-size: 12px;color:rgb(131, 131, 131);">{{item.sourceName}}：</span>
										<span style="font-size: 12px;color:rgb(131, 131, 131);">{{item.showTime}}</span>
									</div>
								</div>
							</div>
							
						</div>
						<div class="more" @click="toStock" v-if="newsList.length > 0">
							<a class="more-btn" href="javascript:;">点击加载更多内容</a>
						</div>
					</el-col>
					<el-col class="hei" :span="20" v-if="cutIndex == 2":style="'height:'+windowHeight1+'px'">
						<div class="detail" style="height: 100%; overflow: auto;">
							<div class="detail-cont">
								<div class="detail-title">
									<h3>{{detailsCont.title}}</h3>
								</div>
								<div class="detail-explain">
									<div>
										<span class="iconfont icon-fabuxuqiu date-icon"></span>
										<span>来源：{{detailsCont.sourceName}}</span>
									</div>
									<div>
										<span class="iconfont icon-shijian date-icon"></span>
										<!-- <span class="iconfont icon-shijian"></span> -->
										<span>时间：{{detailsCont.showTime}}</span>
									</div>
									<div>
										<!-- <span class="iconfont icon-redu"></span> -->
										<span class="iconfont icon-redu redu"></span>

										<span>热度：{{detailsCont.views}}</span>
									</div>
								</div>
							</div>
							<div class="detail-box" style="padding-bottom: 100px;">
								<div>{{detailsCont.content}}</div>
								<div>{{detailsCont.description}}</div>
								<div style="display:flex;align-items: center;flex-direction: column;">
									<img :src="detailsCont.imgurl" />
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="5" v-if="cutIndex == 1">
						<!--  ==> 监听融资下单 -->
						<table-box ref="tableBox" @toTransaction="toTransaction" :hasGetNewOrder="hasGetNewOrder2" :handleOptions2="handleOptionsindex2"
						 :handleOptions3="handleOptions3" :handleOptions4="handleOptions4"></table-box>
					</el-col>
					<el-col class="alterWidthCenter" :span="14" v-if="cutIndex == 1">
						<chart-box v-if="isChartOld" :detail="detail" :code="code"></chart-box>
						<chart-new v-if="!isChartOld" :detail="detail" :code="code" :ucode="ucode"></chart-new>

						<!-- 持仓单子 -->

						<div class="tab-box jiaoyi-000">
							<el-tabs v-model="activeName" class="black-style" v-if="$store.state.haslogin">
								<el-tab-pane label="入仓/出仓" name="zero">
									<buy-box1 @selectDetailsItem="selectDetailsItem" :cutIndex="cutIndex" :detailsCont="detailsCont" :hasGetNewOrder="hasGetNewOrder" :handleOptions2="handleOptions2" :settingInfo="settingInfo" :code="code"></buy-box1>
								</el-tab-pane>
								<el-tab-pane label="融资持仓" name="first">
									<!-- 我的持仓 -->
									<hold-position :haslogin="haslogin" :hasGetNewOrder="hasGetNewOrder" :handleOptions="handleOptions"></hold-position>
								</el-tab-pane>

								<el-tab-pane label="融资平仓" name="second">
									<sell-box :hasChangeSell="hasChangeSell" :handleOptions="handleOptions"></sell-box>
								</el-tab-pane>

								<el-tab-pane label="指数持仓" v-if="$store.state.productSetting.indexDisplay" name="three">
									<!-- 我的持仓 指数 -->
									<index-hold-position :haslogin="haslogin" :hasGetNewOrder="hasGetNewOrder2" :handleOptions="handleOptionsindex"></index-hold-position>
								</el-tab-pane>
								<el-tab-pane label="指数平仓" v-if="$store.state.productSetting.indexDisplay" name="fours">
									<index-sell-box :hasChangeSell="hasChangeSell2" :handleOptions="handleOptionsindex"></index-sell-box>
								</el-tab-pane>
								<el-tab-pane label="期货持仓" v-if="$store.state.productSetting.futuresDisplay" name="five">
									<!-- 我的持仓 期货 -->
									<futures-hold-position :haslogin="haslogin" :hasGetNewOrder="hasChangeSell3" :handleOptions="handleOptionsFutures"></futures-hold-position>
								</el-tab-pane>
								<el-tab-pane label="期货平仓" v-if="$store.state.productSetting.futuresDisplay" name="six">
									<futures-sell-box :hasChangeSell="hasChangeSell3" :handleOptions="handleOptionsFutures"></futures-sell-box>
								</el-tab-pane>

								<el-tab-pane label="配资持仓" name="seven" v-if="$store.state.productSetting.fundsDisplay">
									<!-- 配资持仓 -->
									<funds-hold-position :haslogin="haslogin" :hasGetNewOrder="hasChangeSell4" :handleOptions="handleOptionsFunds"></funds-hold-position>
								</el-tab-pane>
								<el-tab-pane label="配资平仓" name="eight" v-if="$store.state.productSetting.fundsDisplay">
									<funds-sell-box :hasChangeSell="hasChangeSell4" :handleOptions="handleOptionsFunds"></funds-sell-box>
								</el-tab-pane>
							</el-tabs>
							<div v-if="false" class="account-state">
								<span :class="$store.state.userInfo.allProfitAndLose>0?'red':$store.state.userInfo.allProfitAndLose<0?'green':''">持仓总盈亏：{{$store.state.userInfo.allProfitAndLose}}</span>
								<span style="color:#409EFF;">冻结保证金：{{$store.state.userInfo.allFreezAmt}}</span>
								<span style="color:#d06e45;">强制平仓线：{{($store.state.userInfo.enableAmt + $store.state.userInfo.allFreezAmt * settingInfo.forceStopPercent).toFixed(2)}}</span>
							</div>
							<!-- <div v-show="!$store.state.haslogin" class="empty text-center">
							  <div class="btn-wrap">
							    <el-button
							      class="btn-box"
							      type="primary"
							      style="background-color: rgba(0,0,0,0)!important;"
							      @click="toLogin"
							    >登录</el-button>
							    <span>或者</span>
							    <el-button
							      class="btn-box"
							      type="primary"
							      style="background-color: rgba(0,0,0,0)!important;"
							      @click="toRegister"
							    >注册</el-button>
							  </div>
							</div>-->
							<div class="new-list-jiaoyi" v-show="!$store.state.haslogin" style="display: flex;">
								<div class="news-cont">
									<div class="news-title">
										<span style="font-size: 14px;">新闻资讯</span>
										<span class="heng">——</span>
									</div>
									<div  @click="selectDetails(item,index)" v-for="(item, index) in transactionNewList" :key="index" style="font-size: 12px;display: flex; justify-content: space-between;padding:6px 0;">
										<div class="news-list">
											<span class="red">•</span>
											<span>•</span>
											<p>{{item.title}}</p>
										</div>
										<div class="showTime">{{item.addTime}}</div>
									</div>
								</div>
								<div class="news-cont">
									<div class="news-title">
										<span style="font-size: 14px;">通知公告</span>
										<span class="heng">——</span>
									</div>
									<div  @click="selectDetails(item,index)" v-for="(item, index) in transactionNoticeList" :key="index" style="font-size: 12px;display: flex; justify-content: space-between;padding:6px 0;">
										<div class="news-list">
											<span class="red">•</span>
											<span>•</span>
											<p>{{item.artTitle}}</p>
										</div>
										<div class="showTime">{{item.addTime}}</div>
									</div>
								</div>
								<!-- <el-table :data="tableData" border height="290" style="width: 50%;">
							    <el-table-column prop="date" label="新闻资讯 一"  style="width: 50%"></el-table-column>
							  </el-table>-->
							</div>
						</div>

					</el-col>
					<el-col class="alterWidthLeft" :span="5" v-if="cutIndex == 1">
							<buy-box :hasGetNewOrder="hasGetNewOrder" :handleOptions2="handleOptions2" :settingInfo="settingInfo" :code="code"></buy-box>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import HomeHeader from "@/components/HeaderOrder";
	import ChartBox from "./components/chart";
	import ChartNew from "./components/chart2";
	import TableBox from "./components/table";
	import HoldPosition from "./components/holdposition";
	import IndexHoldPosition from "./components/indexholdposition";
	import FuturesHoldPosition from "./components/futuresholdposition";
	import FundsHoldPosition from "./components/fundsholdposition";
	import SellBox from "./components/sell";
	import IndexSellBox from "./components/indexsell";
	import FuturesSellBox from "./components/futuressell";
	import FundsSellBox from "./components/fundssell";
	import BuyBox from "./components/buy";
	import BuyBox1 from "./components/buy1";

	import * as api from "@/axios/api";
	import {
		timeFormat
	} from "@/utils/utils.js";
	// import { setLocalstorage, getLocalstorage } from '@/utils/localstorage'

	export default {
		components: {
			HomeHeader,
			ChartBox,
			ChartNew,
			TableBox,
			HoldPosition,
			BuyBox,
			IndexHoldPosition,
			IndexSellBox,
			SellBox,
			FuturesHoldPosition,
			FundsHoldPosition,
			FuturesSellBox,
			FundsSellBox,
			BuyBox1,
		},
		props: {},
		data() {
			return {
				time1: "time1",
				views1: "views1",
				pageNum: 1,
				cutIndex: 1,
				detailsCont: {},
				searchTran: "",
				newsList: [],
				optionalIndex: -1,
				currIndex: 1,
				// 中间底部通知公告列表
				transactionNoticeList: [],
				// 中间底部新闻列表
				transactionNewList: [],
				// 直播
				direct: [{
					name: "财神道"
				}, {
					name: "王牌健言"
				}],
				// 资讯
				//  type：新闻类型：1、财经要闻，2、经济数据，3、全球股市，
				// 4、7*24全球，5、商品资讯，6、上市公司，7、全球央行
				information: [{
						name: "财经要闻",
						type: 1
					},
					{
						name: "经济数据",
						type: 2
					},
					{
						name: "全球股市",
						type: 3
					},
					{
						name: "7*24全球",
						type: 4
					},
					{
						name: "商品资讯",
						type: 5
					},
					{
						name: "上市公司",
						type: 6
					},
					{
						name: "全球央行",
						type: 7
					},
					{
						name: "精彩视频",
						type: 8
					},
				],
				// 行情未登录
				marketNot: [{
						name: "指数",
						type: "three"
					},
					{
						name: "股票",
						type: "first"
					},
					{
						name: "科创",
						type: "four"
					},
					{
						name: "期货",
						type: "five"
					},
					{
						name: "创业版",
						type: "start"
					},
				],
				// 行情登录
				market: [{
						name: "沪深"
					},
					{
						name: "上证"
					},
					{
						name: "深证"
					},
					{
						name: "板块"
					},
					{
						name: "科技版"
					},
					{
						name: "创业板"
					},
					{
						name: "中小半"
					},
					{
						name: "全球指数"
					},
				],
				code: "",
				ucode: "",
				activeName: "zero",
				haslogin: false,
				detail: {},
				hasChangeSell: 0, // 是否平仓 (融资) 平仓之后数字一直加
				hasChangeSell2: 0, // 是否平仓 (指数) 平仓之后数字一直加
				hasChangeSell3: 0, // 是否平仓 (期货) 平仓之后数字一直加
				hasChangeSell4: 0, // 是否平仓 (配资) 平仓之后数字一直加
				hasGetNewOrder: 0, // 是否下单(融资)  下单数字++ 使用true/false 第二次为true的时候 页面监听不到
				hasGetNewOrder2: 0, // 是否下单(指数)
				hasGetNewOrder3: 0, // 是否下单(期货)
				hasGetNewOrder4: 0, // 是否下单(配资)
				settingInfo: {},
				isChartOld: false,
				windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
				windowHeight: document.documentElement.clientHeight - 160, //实时屏幕高度
				windowHeight1: document.documentElement.clientHeight - 200, //实时屏幕高度
			};
		},
		watch: {
			change(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.getDetail(); // 分时数据
				}
			},
		},
		computed: {
			change() {
				return this.$route.query.code;
			},
		},
		beforeRouteEnter(to, from, next) {
			// 现在想不做判断，进入之前一律刷新一次
			if (!to.query.code) {
				let query = to.query;
				query.code = "300498";
				next({
					path: to.path,
					query: query,
				});
			}
			next();
		},
		beforeRouteUpdate(to, from, next) {
			// 现在想不做判断，进入之前一律刷新一次
			if (!to.query.code) {
				let query = to.query;
				query.code = "300498";
				next({
					path: to.path,
					query: query,
				});
			}
			next();
		},
		beforeCreate() {},
		created() {
			setInterval(() => {
				// this.form.pageSize = Math.ceil(this.windowHeight / 63)
				// this.form2.pageSize = Math.ceil(this.windowHeight / 63)
				this.windowHeight = document.documentElement.clientHeight -  160; //实时屏幕高度
				this.windowHeight1 = document.documentElement.clientHeight -  100; //实时屏幕高度
			
			}, 500);
			// 暂时排错
			// let data = {
			//   'indexDisplay': true
			// }
			// this.$store.state.productSetting = data

			this.code = this.$route.query.code;
			if (this.code.indexOf("hf_") != -1) {
				this.isChartOld = true;
			} else {
				this.isChartOld = false;
			}

			// if(!this.code){
			//   this.getList()
			// }
			// 判断是否 登录
			//  window.localStorage.getItem('phone')
			// getLocalstorage('phone',1000 * 60 * 60)
			this.getUserInfo();

			// if(getLocalstorage('phone',1000 * 60 * 60)){
			//   // 判断是否登录
			//   this.haslogin = true
			//   this.$store.state.haslogin = true
			//   this.getUserInfo()
			// }
			this.$store.state.activeIndex = "transaction";
			this.getSettingInfo();
			if (!this.$store.state.productSetting) {
				this.getProductSetting();
			}
		},
		mounted() {
			window.activeName1 = 'first'
			// setInterval(()=>{
			// 	if(window.cutIndex){
			// 		this.cutIndex = window.cutIndex
			// 		this.detailsCont = window.detailsCont
			// 		// window.cutIndex = 0
			// 		// window.detailsCont = ''
			// 	}
			// },500)
			
			this.getDetail();
			this.getNewList();
			this.getNoticeList();
			// this.getNewsList();
		},
		methods: {
			qidai(){
				this.$message('敬请期待');
			},
			selectDetailsItem(item){
				this.cutIndex = 2;
				this.detailsCont = item
				// this.newType = newType
				// this.newsList = newsList
			},
			toUserCenter() {
				// 进入个人中心
				this.$router.push("/user");
			},
			async handleCommand(val) {
				if (val === "a") {
					// 修改密码
				} else if (val === "c") {
					this.$store.state.loginIsShow = true;
				} else if (val === "d") {
					this.$router.push("/user");
				} else {
					// 退出登录
					this.clearCookie();
					let data = await api.logout();
					if (data.status === 0) {
						// 退出登录清除本地存储 清除用户数据
						window.localStorage.clear();
						this.$store.state.haslogin = false;
						this.$message.success("您已退出登录");
						this.$store.state.userInfo = {};
						this.$router.push("/login");
					} else {
						this.$message.error(data.msg);
					}
				}
			},
			toLogin1() {
				this.$router.push("/login");
			},
			// 选择色系
			selectColor(command) {
				localStorage.setItem("styleName", command);
				this.$store.commit('setSystemColor', command)
				document.getElementsByTagName("body")[0].className = command;
				window.drawLine && window.drawLine()
			},
			toIndex() {
				this.$router.push({
					path: '/'
				})
			},
			async toTransaction(row) {
				var ziCode = this.$route.query
				// 出仓数据
				var data = await api.findUserPositionByCode({
					stockCode: row.code || ziCode.code
				})
				console.log(row,'222222222222222')
				if (data.status == 0) {
					this.$store.commit('setUserPositionData', data.data.list[0])
				}
			},
			async toStock() {
				//加载跟多新闻列表
				var page = ++this.pageNum;
				var query = {
					pageNum: page,
					pageSize: 15,
					type: this.newType
				};
				var list = await this.getNewsList(query);
				console.log(list);
				if (list.length <= 0) {
					this.$message({
						message: "没有更多数据了",
						type: "warning",
					});
					return;
				}
				this.newsList.push(...list);
			},
			async sort(type) {
				// 新闻列表排序
				var query = {
					pageNum: this.pageNum,
					pageSize: 15,
					type: this.newType
				};
				if (type == "sort") {
					var q = Object.assign(query, {
						sort: this.time1
					});
					this.newsList = await this.getNewsList(q);
					this.switchData(this.newsList, "showTime");
					this.time1 = this.time1 == "time1" ? "time0" : "time1";
				} else {
					var q = Object.assign(query, {
						sort: this.views1
					});
					console.log(q);
					this.newsList = await this.getNewsList(q);
					this.switchData(this.newsList, "showTime");
					this.views1 = this.views1 == "views1" ? "views0" : "views1";
				}
			},
			async selectDetails(item, index) {
				// 选择详情
				console.log(item)
				this.cutIndex = 2;
				var data = await api.getNewsDetailList({
					id: item.id,
				});
				if (data.status == 0) {
					this.optionalIndex = item.type
					this.currIndex = -1
					this.detailsCont = data.data;
					var query = {
						pageNum: this.pageNum,
						pageSize: 15,
						type: item.type,
					};
					this.newType = item.type
					this.newsList = await this.getNewsList(query);
					this.switchData(this.newsList, "showTime");
				}
				var data = await api.updateNewsViews({
					id: item.id,
				});
				if (data.status == 0) {}
			},
			async getSearch() {
				//  搜索新闻
				var query = {
					// keyword: this.searchTran,
					pageNum: 1,
					pageSize: 15,
				};
				if (this.searchTran) {
					var q = Object.assign(query, {
						keyword: this.searchTran
					});
					this.newsList = await this.getNewsList(q);
				} else {
					this.newsList = this.getNewsList(query);
				}
			},
			async getNewsList(query) {
				// 获取资讯列表接口（交易大厅左侧小列表）

				var data = await api.getNewsList(query);
				if (data.status == 0) {
					// this.newsList = data.data.list;
					return data.data.list;
				}
			},
			async optionalTablebox(item, index, type) {
				// 资讯tab选项
				this.cutIndex = type;
				this.optionalIndex = index;
				this.currIndex = -1;
				var query = {
					pageNum: this.pageNum,
					pageSize: 15,
					type: item.type,
				};
				this.newType = item.type
				this.newsList = await this.getNewsList(query);
				this.switchData(this.newsList, "showTime");

				var data = await api.getNewsDetailList({
					id: this.newsList[0].id,
				});

				if (data.status == 0) {
					// list.forEach((item) => {
					//   var tempStr = item[time] + "";
					//   var timestamp = tempStr.slice(0, tempStr.length - 3);
					//   var newDate = new Date();
					//   newDate.setTime(timestamp * 1000);
					//   item[time] = newDate.toLocaleDateString();
					// });
					this.detailsCont = data.data;
				}
			},
			optTablebox(item, index, type, zi) {
				// 行情tab选项
				this.optionalIndex = -1;
				if (zi) {
					this.cutIndex = 1;
					console.log(zi)
					this.currIndex = "second";
					setTimeout(()=>{
							this.$refs.tableBox.activeName = "second";
					},500)
					window.activeName1 = 'zi'
					return;
				}
				this.currIndex = index;
				this.cutIndex = type;
				window.activeName1 = item.type
				this.$refs.tableBox.activeName = item.type;
				// if(item.type == 'start'){
				// 	this.$refs.tableBox.getlistStart()
				// }
			},
			// @tab-click="handleClick"
			// handleClick(val){
			//   let name = window.localStorage.getItem('phone')
			//   if(name){
			//     this.activeName = val
			//   }
			// },
			// 时间转换
			switchData(list, time) {
				list.forEach((item) => {
					var tempStr = item[time] + "";
					var timestamp = tempStr.slice(0, tempStr.length - 3);
					var newDate = new Date();
					newDate.setTime(timestamp * 1000);
					item[time] = newDate.toLocaleDateString();
				});
			},
			async getNoticeList() {
				// 获取交易大厅-中间部分-通知公告
				let data = await api.getTransactionNoticeList({
					pageSize: 10,
				});
				if (data.status == 0) {
					this.switchData(data.data.list, "addTime");
					this.transactionNoticeList = data.data.list;
				}
			},
			async getNewList() {
				// 获取交易大厅-中间部分-新闻资讯
				let data = await api.getTransactionNewList({
					pageSize: 10,
				});
				if (data.status == 0) {
					this.switchData(data.data.list, "addTime");
					this.transactionNewList = data.data.list;
				}
			},

			handleOptions(opts) {
				// 监听平仓状态 融资
				this.hasChangeSell = opts;
				if (this.hasChangeSell) {
					this.activeName = "second";
				}
			},
			handleOptionsindex(opts) {
				// 监听平仓状态 指数
				this.hasChangeSell2 = opts;
				if (this.hasChangeSell2) {
					this.activeName = "fours";
				}
			},
			handleOptionsFutures(opts) {
				// 监听平仓状态 期货
				this.hasChangeSell3 = opts;
				if (this.hasChangeSell3) {
					this.activeName = "six";
				}
			},
			handleOptionsFunds(opts) {
				// 监听平仓状态 配资
				this.hasChangeSell4 = opts;
				if (this.hasChangeSell4) {
					this.activeName = "eight";
				}
			},
			handleOptions2(opts) {
				// 监听指数下单状态
				this.hasGetNewOrder = opts;
				if (this.hasGetNewOrder) {
					this.activeName = "first";
				}
			},
			handleOptions3(opts) {
				// 监听期货下单状态
				this.hasGetNewOrder3 = opts;
				if (this.hasGetNewOrder3) {
					this.activeName = "five";
				}
			},
			handleOptions4(opts) {
				// 监听配资下单状态
				this.hasGetNewOrder4 = opts;
				if (this.hasGetNewOrder4) {
					this.activeName = "seven";
				}
			},
			handleOptionsindex2(opts) {
				// 监听下单状态
				this.hasGetNewOrder2 = opts;
				if (this.hasGetNewOrder2) {
					this.activeName = "three";
				}
			},
			async getDetail() {
				if (this.$route.query.code.indexOf("hf_") != -1) {
					this.isChartOld = true;
				} else {
					this.isChartOld = false;
				}
				let opts = {
					code: this.$route.query.code,
				};
				this.loading = true;
				let data = await api.getSingleStock(opts);
				let gid = data.data.gid;
				let code = data.data.code;
				let ucode = gid.startsWith("sh") ? code + ".sh" : code + ".sz";
				this.ucode = ucode;
				this.loading = false;
				if (data.status === 0) {
					this.detail = data.data;
				} else {
					this.$message.error(data.msg);
				}
			},
			toRegister() {
				// 注册
				this.$router.push("/register");
			},
			toLogin() {
				// 登录
				this.$store.state.loginIsShow = true;
			},
			async getList() {
				// 获取表格数据
				let opt = {
					pageNum: 1,
					pageSize: 1,
				};
				let data = await api.getStock(opt);
				if (data.status === 0) {
					// data.data.list.forEach(element => {
					//     this.list.push(element)
					// });
					this.list = data.data.list[0];
					this.$router.push({
						path: "/transaction",
						query: {
							code: data.data.list[0].code,
						},
					});
					// window.location.reload()
				} else {
					this.$message.error(data.msg);
				}
			},
			async getSettingInfo() {
				// 网站设置信息
				let data = await api.getSetting();
				if (data.status === 0) {
					// 成功
					this.settingInfo = data.data;
					// 杠杆倍数
					// this.form.lever = data.data.siteLever
				} else {
					this.$message.error(data.msg);
				}
			},
			async getProductSetting() {
				// 获取网站产品设置信息
				let result = await api.getProductSetting();
				if (result.status === 0) {
					this.$store.state.productSetting = result.data;
				} else {
					this.$message.error(result.msg);
				}
			},
			async getUserInfo() {
				// 获取用户信息
				let data = await api.getUserInfo();
				if (data.status === 0) {
					// 判断是否登录
					this.haslogin = true;
					this.$store.state.haslogin = true;
					this.$store.state.userInfo = data.data;
				} else {
					this.haslogin = false;
					this.$store.state.haslogin = false;
					// this.$message.error(data.msg)
				}
			},
		},
	};
</script>
<style lang="less" scoped>
	.alterWidthLeft{
		width: 18.83333%;
	}
	.alterWidthCenter{
		width: 60.33360%;
	}
	.red-bg .el-dropdown {
		font-size: 14px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 68px;
	}

	.black-bg .el-dropdown {
		color: #fff;
		font-size: 14px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 68px;
	}

	/deep/ .tab-box .el-tabs__content {
		// height: 250px !important;
	}

	.header-btn-new {
		text-align: center;
		width: 45px;
		color: #fff;
		line-height: 30px;
	}
.optional-item-hover{
			&:hover{
				background-color: #002346;
			}
		}
	.black-bg {
		.hei{
			background-color: #000;
		}
		.newsList-item {
			border-bottom: 1px solid rgba(255, 255, 255, .1);
		}

		.buy-xian {
			color: #3d3d41;
		}

		.el-main {
			margin: 0 !important;
			background: rgb(33, 39, 50);
		}

		.more {
			background: #a1a1a1;
			opacity: 0.8;
			border-radius: 3px;
			display: flex;
			justify-content: center;
			align-items: center;

			.more-btn {
				width: 96px;
				height: 12px;
				font-size: 12px;
				font-family: MicrosoftYaHeiLight;
				font-weight: 400;
				color: #ffffff;
			}

			height: 30px;
		}
	}

	.red-bg {

		.new-list-jiaoyi {
			margin-top: 4px;
			border: 1px solid #F44336;
		}

		.more {
			background: #000000;
			opacity: 0.8;
			border-radius: 3px;
			display: flex;
			justify-content: center;
			align-items: center;

			.more-btn {
				width: 96px;
				height: 12px;
				font-size: 12px;
				font-family: MicrosoftYaHeiLight;
				font-weight: 400;
				color: #ffffff;
			}

			height: 30px;
		}

		.shangxiajiantou {
			font-size: 12px;
			color: #ccc;
		}

		.redu,
		.date-icon {
			color: rgb(193, 24, 21);
		}

		.shangxiajiantou {
			font-size: 12px;
			color: #ccc;
		}

		.shous {
			border: 1px solid rgb(202, 202, 202);
			width: 80%;
			padding: 5px 5px 5px 20px;
		}

		.search-tran {
			position: absolute;
			right: 25px;
			top: 10px;
		}

		.listhi-cont {
			background-color: #fff;
		}

		.history-title {
			color: #000;
			line-height: 18px;
			font-weight: bolder !important;
		}

		.sanjiao {
			position: absolute;
			top: 4px;
			-webkit-transform: rotate(45deg);
			transform: rotate(-180deg);
			/* width: 0px; */
			right: 4px;
			font-size: 10px;
		}

		.red {
			color: #c11815;
		}

		.sanjiao.ccc {
			color: rgb(65, 65, 85);
		}

		.current-price {
			color: #c11815;
		}

		.quantity {
			display: inline-block;
			background-color: #c11815;
			text-align: center;
			// margin-left: 10px;
			margin-right: 10px;
			border-radius: 2px;
			line-height: 13px;
			color: #fff;
			padding: 3px 5px;
			height: 13px;
		}

		.bg-cc {
			background-color: rgb(65, 65, 85);
		}

		.listhi-cont::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 5px;
			/*高宽分别对应横竖滚动条的尺寸*/
			height: 1px;
		}

		.listhi-cont::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 5px;
			box-shadow: inset 0 0 5px rgba(199, 14, 14, 0.2);
			background: rgb(193, 24, 21);
		}

		.listhi-cont::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			background: #ededed;
		}
	}

	.black-bg {
		.shangxiajiantou {
			font-size: 12px;
			color: #ccc;
		}

		.date-icon,
		.redu {
			color: rgb(71, 167, 196);
		}

		.shous {
			border: 1px solid rgb(35, 75, 110);
			background: no-repeat;
			width: 80%;
			padding: 5px 5px 5px 20px;
			color: #fff;
		}

		.search-tran {
			position: absolute;
			right: 25px;
			top: 10px;
		}

		.listhi-cont {
			color: #ececec;
		}

		.history-title {
			line-height: 18px;

			color: #bcbcbc;
		}

		.sanjiao {
			position: absolute;
			top: 4px;
			-webkit-transform: rotate(45deg);
			transform: rotate(-180deg);
			/* width: 0px; */
			right: 4px;
			font-size: 10px;
		}

		.red {
			color: #c11815;
		}

		.sanjiao.ccc {
			color: rgb(65, 65, 85);
		}

		.current-price {
			color: #c11815;
		}

		.quantity {
			display: inline-block;
			background-color: #c11815;
			text-align: center;
			// margin-left: 10px;
			margin-right: 10px;
			border-radius: 2px;
			line-height: 13px;
			color: #fff;
			padding: 3px 5px;
			height: 13px;
		}

		.bg-cc {
			background-color: rgb(65, 65, 85);
		}

		.listhi-cont::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 5px;
			/*高宽分别对应横竖滚动条的尺寸*/
			height: 1px;
		}

		.listhi-cont::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 5px;
			box-shadow: inset 0 0 5px rgba(199, 14, 14, 0.2);
			background: #138eb4;
		}

		.listhi-cont::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			background: #ededed;
		}

		.xianjin {
			color: rgb(151, 150, 150);
		}
	}

	.currIndex {
		background: rgb(2, 77, 161);
	}

	.transform-main {
		min-width: 1200px;
		padding: 10px;
	}

	.tab-box /deep/ .el-tabs .el-tab-pane {
		padding: 0;
		// min-height: 300px;
	}

	.el-table td {
		padding: 5px 0;
	}

	.tab-box {
		position: relative;

		.empty {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			z-index: 10;
		}

		.btn-wrap {
			padding-top: 120px;
			color: #fff;

			span {
				padding: 0 20px;
			}
		}

		.btn-box {
			background: none;
			border-color: #c11815;
			color: #c11815;
			font-weight: 600;
			font-size: 16px;
		}
	}

	.account-state {
		color: #ddd;
		position: absolute;
		top: 0;
		right: 0;
		line-height: 36px;

		span {
			margin-right: 20px;
		}
	}
</style>
